<template>
  <div class="headerModule">
    <el-row class="box">
      <el-col :span="3">
        <a href="javascript:void(0);" @click="toList" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
      </el-col>
      <el-col :span="11">
        <div class="nav">
          <ul class="clearfix">
            <li style="font-size: 26px;color: #de5323;">心声社区</li>
          </ul>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="head-search">
          <el-form ref="form">
            <el-form-item>
              <el-input size="small" placeholder="搜索" v-model="searchValue" @keyup.enter="routerPush(searchValue,'articleSearch')">
                <template #suffix>
                  <i @click="routerPush(searchValue,'articleSearch')" class="el-input__icon el-icon-search" style="cursor: pointer"></i> </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="menu">
          <ul class="clearfix">
            <li v-if="userInfo.secret" @click="router.push('/userInfo')">
              <div class="author">
                <a href="javascript:void(0);">
                  <img :src="userInfo.src || require('src/assets/imgs/use.png')" />
                </a>
              </div>
              <a href="javascript:void(0);">{{userInfo.nickName}}</a>
            </li>
            <li>
              <a v-if="!userInfo.secret" href="javascript:void(0);" @click="toLogin">登录</a>
            </li>
            <li v-if="userInfo.secret">
              <a href="javascript:void(0);" @click="exit">退出</a>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { ref, computed, onMounted } from 'vue';
import store from 'src/store';
import { logout } from 'src/plugins/http/server/sys/user';
import { msgFn } from 'src/utils';
import userHooks from 'src/hooks/userHooks';

export default {
    setup() {
        const { router, toLogin } = userHooks({});
        const userInfo = computed(() => store.state.userInfo);
        const code = computed(() => store.state.code);

        const routerPush = (words: string, routerName: string) => {
            if (userInfo.value.id) {
                if (words) {
                    let params = {
                        'name': routerName,
                        'params': {
                            'keyWords': words
                        }
                    };
                    router.push(params);
                }
            }
        };

        const exit = () => {
            logout({}).then(res => {
                msgFn('退出成功', 'success');
                setTimeout(() => {
                    store.commit('_logout', {});
                    router.replace({
                        'name': 'login'
                    });
                }, 1001);
            });
        };
        const searchValue = ref('');

        const toList = () => {
            if (userInfo.value.id) {
                if (code.value) {
                    router.push(`/articleList/${code.value}`);
                } else {
                    router.push('/articleList/1');
                }
            }
        };

        onMounted(() => {});
        return {
            userInfo,
            router,
            searchValue,
            routerPush,
            toLogin,
            toList,
            exit
        };
    }
};
</script>
<style lang='less' scoped>
.headerModule {
  background-color: #fff;
  box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 8px 0 rgba(0, 0, 0, 0.02);
  height: 50px;
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 999;
  .box {
    height: 50px;
    line-height: 50px;
    width: 1210px;
    margin: 0 auto;
    .logo {
      float: left;
      margin-top: 5px;
      *margin-top: 2px;
      img {
        height: 40px;
      }
    }
    .nav {
      float: left;
      margin-left: 8px;
      ul {
        li {
          float: left;
          a {
            display: block;
            margin-left: 25px;
            color: #2d2d2d;
            font-size: 16px;
            &:hover {
              color: #2196f3;
            }
          }
        }
      }
    }
    .menu {
      float: right;
      ul {
        li {
          float: left;
          a {
            display: block;
            margin-left: 18px;
            color: #363636;
            font-size: 14px;
            &:hover {
              color: #2196f3;
            }
          }
          .author {
            position: relative;
            color: #999;
            img {
              width: 32px;
              height: 32px;
              position: absolute;
              left: -18px;
              top: 9px;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              border-radius: 50%;
              display: block;
            }
          }
        }
      }
    }
    .head-search {
      float: left;
      margin-left: 20px;
      margin-top: 4px;
    }
  }
}
.headerModule .box:before,
.headerModule .box:after {
  clear: both;
  display: table;
  content: '';
  line-height: 0;
}
.logged-out-wrapper {
  color: #7d7d7d;
  display: none;
  float: left;
  max-width: 70px;
  position: relative;
  cursor: pointer;
}
</style>